<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		<script type="text/javascript" src="js/layui/layui.js" charset="UTF-8"></script>
	</head>

	<body>
		第一种导航<br /><br />
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">控制台<span class="layui-badge">9</span></a>
			</li>
			<li class="layui-nav-item">
				<a href="">个人中心<span class="layui-badge-dot"></span></a>
			</li>
			<li class="layui-nav-item">
				<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="javascript:;">修改信息</a>
					</dd>
					<dd>
						<a href="javascript:;">安全管理</a>
					</dd>
					<dd>
						<a href="javascript:;">退了</a>
					</dd>
				</dl>
			</li>
		</ul><br /><br /> 第二种导航
		<br /><br />
		<ul class="layui-nav" lay-filter="">
			<li class="layui-nav-item">
				<a href="">最新活动</a>
			</li>
			<li class="layui-nav-item layui-this">
				<a href="">产品</a>
			</li>
			<li class="layui-nav-item">
				<a href="">大数据</a>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">解决方案</a>
				<dl class="layui-nav-child">
					<!-- 二级菜单 -->
					<dd>
						<a href="">移动模块</a>
					</dd>
					<dd>
						<a href="">后台模版</a>
					</dd>
					<dd>
						<a href="">电商平台</a>
					</dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="">社区</a>
			</li>
		</ul>

		<script>
			//注意：导航 依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function() {
				var element = layui.element;

				//…
			});
		</script><br /><br />
	</body>

</html>